<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      .one {
         float: left;
         overflow: hidden;
         margin-left: 20px;

      }

      div img {
         transition: all 1s;
      }

      div a img:hover {
         transform: scale(1.1);
      }
      ul li{
         float: left;
         list-style: none;
         margin-right: 10px;
         width: 50px;
         height: 50px;
         border: 1px solid greenyellow;
         line-height: 50px;
         text-align: center;
         border-radius: 50%;
         transition: all 1s;
      }
      ul li:hover{
         transform: scale(1.2);
      }
   </style>
</head>

<body>
   <div  class="one"><a href="javascirpt:;"><img src="media/scale.jpg" alt=""></a></div>
   <div  class="one"><a href="javascirpt:;"><img src="media/scale.jpg" alt=""></a></div>
   <div  class="one"><a href="javascirpt:;"><img src="media/scale.jpg" alt=""></a></div>
   <div>
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>10</li>
      </ul>
   </div>
</body>

</html>